require('../../../less/views/main/main_top.less');
var React = require('react');
var ToggleSwitch = require('../../controls/ToggleSwitch');

module.exports = React.createClass({
	displayName:'MainTop',
	getInitialState:function(){
		return {
			showSearch: false,
			showNav: true,
			navIcon: 'fa-bars',
			ifSwitch: true
		}
	},
	componentDidMount:function(){

	},
	__search: function (item, event){
		this.setState({
			showSearch: !this.state.showSearch
		});
	},
	__showNotification: function (){

	},
	__logout: function (){
		Store.post("/logout", JSON.parse(localStorage.getItem('LOGIN_SESSION'))).exec().then(function (data){
			if(data.status==200){
				this.props.onLogout && this.props.onLogout(data);
			}else {
				Popup.message({
					content: 'Logout Error',
					type: 'danger'
				});
			}
		}.bind(this), function (data){
			Popup.message({
				content: 'Logout Error',
				type: 'danger'
			});
		});
	},
	__clickNavIcon: function (){
		var _showNav = !this.state.showNav;
		this.setState({
			showNav: _showNav,
			navIcon: _showNav?'fa-bars':'fa-arrow-left'
		});

		this.props.onClickNavIcon && this.props.onClickNavIcon(_showNav);
	},
	render:function(){
		var _accountAry = [
			{
				title: 'Logout',
				icon: 'fa-sign-out',
				action: '__logout'
			},
			{
				title: 'Notification',
				icon: 'fa-bell',
				action: '__showNotification',
				count: 5
			},
			{
				title: 'Search',
				icon: 'fa-search',
				action: '__search'
			}
		];
		return (
			<div className="main-top">
				<div className={"search " + (this.state.showSearch?'show':'hide')}>
					<div className="inner">
						<i className="icon fa fa-arrow-left" onClick={()=>this.setState({ showSearch: false })}></i>
						<input name="search" type="search" placeholder="search" />
					</div>
				</div>
				{
					this.state.ifSwitch && <div className="nav" onClick={this.__clickNavIcon}>
						<a className="nav-icon"><i className={"fa " + this.state.navIcon}></i></a>
					</div>
				}
				<div className="logo">Dev Data Lab</div>
				<ul className="account">
					{
						_accountAry.map(function (item, index){
							return <li key={index} title={item.title} onClick={(event)=>this[item.action].call(this, item, event)}>
								<a>
									<i className={"icon fa "+item.icon}></i>
									{
										item.count&&<i className="count">{item.count}</i>
									}
								</a>
							</li>;
						}.bind(this))
					}
					<li style={{ marginRight: 10 }}>
						<ToggleSwitch onChange={(value)=>this.setState({ ifSwitch: value })}/>
					</li>
				</ul>
			</div>
		);
	}
});
